import { Button, Select, Image } from 'antd';
import Table, { ColumnsType, TableProps } from 'antd/lib/table';
import { ReactNode, useEffect, useState } from 'react';
import './index.css'

// 引如获取订单详情api
import * as api from '@/api/pay'

// 引入自定义icon图标
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_3608375_40ttdg36r7z.js'// 在 iconfont.cn 上生成
})

// 下拉选框select的Option
const { Option } = Select;
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};
// 声明表格数据类型
interface DataType {
    key: React.Key;
    name: string;
    chinese: number;
    math: number;
    english: number;
}

let el: ReactNode = (
    <div className='table-elect'>
        <span>每页显示</span>
        <Select defaultValue="5行" style={{ width: 80 }} onChange={handleChange}>
            <Option value="5">5条</Option>
            <Option value="10">10条</Option>
            {/* <Option value="disabled" disabled>
                    Disabled
                </Option> */}
            <Option value="12">12条</Option>
        </Select>
    </div>
)
const Amount = () => {
    // 表格列
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'name',
        },
        {
            title: 'ID',
            dataIndex: 'chinese',
            sorter: {
                compare: (a, b) => a.chinese - b.chinese,
                multiple: 3,
            },
        },
        {
            title: '成交金额(元)',
            dataIndex: 'math',
            sorter: {
                compare: (a, b) => a.math - b.math,
                multiple: 2,
            },
        },
        {
            title: '成交时间',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 1,
            },
        },
        {
            title: '状态',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 1,
            },
        },
    ]; 
    // let data: DataType[] = [];

    const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    };

    //控制modal显示隐藏
    let [show, setShow] = useState(false)
    const [loading, setLoading] = useState(false);
    const [order, setOrder] = useState()
    let getOrderList = () => {
        setLoading(true)
        api.getOrder()
            .then(res => {
                console.log(res.data.data);
                res.data.data.forEach((item: any) => {
                    item.image = <Image src={item.orderDetail[0].imageUrl} width={30} height={20} />
                    item.key = item._id
                    item.name = item.orderDetail[0].productName

                    setOrder(res.data.data)
                    setLoading(false)
                })
            })
    }
    useEffect(() => {
        getOrderList()
    }, [])
    return (
        <div className="amount">
            <div className="head">
                <div className="total">
                    <div className="total_fee">
                        <span className='icon'>
                            <MyIcon type='icon-meiyuan' />
                        </span>
                        <span className='num'>
                            <span>
                                1223345678345542
                            </span>
                            <span>
                                总成交金额(元)
                            </span>
                        </span>
                    </div>

                    <div className="total_fee">
                        <span className='icon'>
                            <MyIcon type='icon-qianbao' />
                        </span>
                        <span className='num'>
                            <span>
                                1223345678345542
                            </span>
                            <span>
                                总成交金额(元)
                            </span>
                        </span>
                    </div>
                </div>
                <div className="time">
                    <span>最新统计时间：2022-10-6</span>
                    <button><MyIcon type='icon-baobiao' />查看月报表</button>
                </div>
            </div>
            <div className="order">
                <Button type="primary">全部订单</Button>
                <Button className='btn_now'>当天订单</Button>
                <Button className='btn_mon'>当月订单</Button>
            </div>

            <Table loading={loading} bordered columns={columns} dataSource={order} onChange={onChange} title={() => { return el; }} pagination={{ pageSize: 5 }} />
        </div>
    )
}

export default Amount

